
Vue.component('color-picker', {
    template: '#color-picker-template',
    data: function() {
        return {
            show: false,
            colorHex: 'aaa',
            styleValue: '',
            style: {
                border: 'solid 2px',
                position: 'absolute',
                width: '25em',
                height: '20em',
                'background-color': '#FFFFFF',
                display: 'none',
                padding: '1em',
                top: '0px',
                left: '0px',
                'z-index': 99999,
            },
            hexChars: '0123456789ABCDEF',
            hexMapNum: {
                '0': 0,
                '1': 1,
                '2': 2,
                '3': 3,
                '4': 4,
                '5': 5,
                '6': 6,
                '7': 7,
                '8': 8,
                '9': 9,
                'A': 10,
                'B': 11,
                'C': 12,
                'D': 13,
                'E': 14,
                'F': 15,
            },
            r: 0,
            g: 0,
            b: 0,
            callback: function() {}, //用于通知颜色变更的回调函数，在openColorPicker时传入
        }
    },
    mounted: function() {
        console.log('color-picker mounted')
        this.styleValue = this.refreshStyle()
        this.r = this.random256()
        this.g = this.random256()
        this.b = this.random256()
        this.colorHex = this.transferRgbToColorHex(this.r, this.g, this.b)
    },
    watch: {
        show: function(val) {
            // console.log('new show: ' + val)
            if (!this.show) {
                this.style.display = 'none'
            } else {
                this.style.display = 'block'
            }
            this.styleValue = this.refreshStyle()
        },
        colorHex: function(val) {
            let rgb = this.transferHexToRgb(val)
            this.r = rgb[0]
            this.g = rgb[1]
            this.b = rgb[2]
            if (this.callback) this.callback(val)
        },
        r: function(val, oldValue) {
            if (val === oldValue) return
            if (val instanceof String) {
                val = parseInt(val)
                this.r = val
            }
            this.colorHex = this.transferRgbToColorHex(val, this.g, this.b)
        },
        g: function(val, oldValue) {
            if (val === oldValue) return
            if (val instanceof String) {
                val = parseInt(val)
                this.g = val
            }
            this.colorHex = this.transferRgbToColorHex(this.r, val, this.b)
        },
        b: function(val, oldValue) {
            if (val === oldValue) return
            if (val instanceof String) {
                val = parseInt(val)
                this.b = val
            }
            this.colorHex = this.transferRgbToColorHex(this.r, this.g, val)
        },
    },
    methods: {
        refreshStyle: function() {
            let styleV = ''
            for (let key in this.style) {
                styleV += key + ':' + this.style[key] + ';'
            }
            return styleV
        },
        random256: function() {
            return Math.floor(Math.random() * 256)
        },
        randomColor: function() {
            let color = '#'
            for (let i = 0; i < 6; ++i) {
                color += this.hexChars[Math.floor(Math.random() * 16)]
            }
            return color
        },
        fromHexToNumber: function(hex) {
            let num = this.hexMapNum[hex[1]]
            num += 16 * this.hexMapNum[hex[0]]
            return num
        },
        fromNumberToHex: function(num) {
            return this.hexChars[Math.floor(num / 16)] + this.hexChars[num % 16]
        },
        transferHexToRgb: function(hex) {
            let h = hex
            if (hex[0] === '#') {
                h = hex.substring(1)
            }
            let rgb = []
            rgb.push(this.fromHexToNumber(h.substring(0,2)))
            rgb.push(this.fromHexToNumber(h.substring(2,4)))
            rgb.push(this.fromHexToNumber(h.substring(4,6)))
            return rgb
        },
        transferRgbToColorHex: function(r, g, b) {
            let colorHex = '#'
            if (Number.isNaN(r)) r = this.random256()
            colorHex += this.fromNumberToHex(r)
            if (Number.isNaN(g)) g = this.random256()
            colorHex += this.fromNumberToHex(g)
            if (Number.isNaN(b)) b = this.random256()
            colorHex += this.fromNumberToHex(b)
            return colorHex
        },
        onColorChangeClick: function(type, val) {
            if (type === 'R') {
                let _r = parseInt(this.r) + val
                if (0 <= _r && _r < 256) {
                    this.r = _r
                }
            } else if (type === 'G') {
                let _g = parseInt(this.g) + val
                if (0 <= _g && _g < 256) {
                    this.g = _g
                }
            } else if (type === 'B') {
                let _b = parseInt(this.b) + val
                if (0 <= _b && _b < 256) {
                    this.b = _b
                }
            }
        },
        onColorHexChange: function(event) {
            // console.log(event)
            let colorHex = event.target.value
            if (!COLOR_PATTERN.test(colorHex)) {
                alert('颜色Hex表达式不正确，请检查并重新输入')
                return
            }
            this.colorHex = colorHex
        },
        openColorPicker: function(param) {
            // console.log(param)
            let color
            if (undefined === param || null === param) {
                color = this.randomColor()
                param = {
                    color,
                    top: 0,
                    left: 0,
                }
            } else {
                if (undefined === param.color || null === param.color || param.color.length < 6) {
                    color = this.randomColor()
                } else {
                    color = param.color
                }
            }
            // console.log('color: ', color)
            let rgb = this.transferHexToRgb(color)
            // console.log('rgb: ', rgb)
            this.r = rgb[0]
            this.g = rgb[1]
            this.b = rgb[2]
            this.colorHex = color
            this.callback = param.callback
            this.style.top = param.top + 'px'
            this.style.left = param.left + 'px'
            this.show = true
            this.styleValue = this.refreshStyle()
            if (this.callback) this.callback(color)
        },
        onClosePicker: function() {
            this.show = false
        },
    },
})
